<template>
	<view class="content">
		<view class="status_bar"></view>
		<!-- 搜索栏 -->
		<view class="searchBox f-c-a">
			<u-icon @click="$back(1)" size="40" name="arrow-left"></u-icon>
			<view class="f searchItem">
				<u-icon class="search" size="40" name="search"></u-icon>
				<input type="text" v-model="searchCity" placeholder="搜索商品" />
			</view>
			<text @click="toSearch" class="f35">搜索</text>
		</view>
		<!-- 商品列表 -->
		<view >
			<view v-for="(item,index) in dataList" class="item f-c-b" @click="$to(`../product_detail/product_detail`)">
				<view class="item-left">
					<image :src="item.url" mode="widthFix"></image>
				</view>
				<view class="item-right">
					<view class="title">
						{{item.title}}
					</view>
					<view class="price_browse f-c-b f30">
						<view class="price">
							<text class="f40">￥{{item.price.split('.')[0]}}.</text>
							<text>{{item.price.split('.')[1]}}</text>
						</view>
						<view class="browse f25 c6">
							浏览：{{item.browse}}人
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dataList:[{
					title:"甩开油田清爽一夏·【美国版】持 妆DW粉底液30ml 补水遮瑕持久...",
					price:'88.88',
					browse:200,
					url:"../../static/index/img_sp.png"
				},{
					title:"甩开油田清爽一夏·【美国版】持 妆DW粉底液30ml 补水遮瑕持久...",
					price:'88.88',
					browse:200,
					url:"../../static/index/img_sp.png"
				}],
			}
		},
		methods: {
			toSearch(){
				
			}
		}
	}
</script>

<style>
	.content{
		background-color: #F4F4F4;
		height: 100vh
	}
.searchItem {
		background-color: #ebebeb;
		margin: 20rpx 20rpx;
		padding: 13rpx 50rpx;
		border-radius: 10rpx;

	}

	.search {
		margin-right: 20rpx;
	}
	
	.item{
		background-color: #FFFFFF;
		margin-bottom: 20rpx;
		padding: 20rpx;
	}
	.item-left image{
		width: 160rpx;
	}
	.item-right{
		margin: 0 25rpx;
	}
	.price_browse{
		margin-top: 20rpx;
	}
	.price{
		color: #FF2929;
	}

</style>
